<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>环境对象this</title>
</head>

<body>
  <button>点击</button>
  <script>
    // 环境对象 this
    // 简单理解: 谁调用函数, this 就指向谁

    // 1. 全局环境
    // 在浏览器中执行 js, 全局所有的东西都属于 window
    // a = 10
    // console.log(window.a)
    // console.log(this) // window 对象, 是浏览器的顶级对象

    // 2. 普通函数
    // function fn() {
    //   console.log(this) // window 对象
    // }
    // 在浏览器中任何地方都可以省略 window
    // window.alert('xx')
    // window.fn()

    // 3. 对象方法
    // const obj = {
    //   uname: '佩奇',
    //   sing: function () {
    //     console.log(this) // 当前 obj 对象
    //   }
    // }
    // obj.sing()

    // 4. 事件
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      // 事件处理函数不是由我们调用的, 是浏览器调用的
      // 它是有事件源触发的, 所以 this 指向事件源
      console.log(this) // 指向事件源
      console.log(this === btn)
    })

//     小总结： 
// 1. 全局环境
// 2. 普通函数
// 3. 对象方法
// 4. 事件
  </script>
</body>

</html>